<template>
  <div class="container">
    <nav-bar title="可用收益" v-if="isISP==='false'" />
    <div class="main">
      <div class="amount">
        <div class="dis">
          可用收益
        </div>
        <h3><i>¥</i>{{userBenefitDetail.Balance}}</h3>
      </div>
    </div>
    <div class="user-navs">
      <div class="item">
        <div class="label">收款方式</div>
        <div class="value">
          <img class="alipay" :src="require(`../../assets/img/${paywaysImglist[paywayIndex]}.png`)" />
          {{payways[paywayIndex]}}
        </div>
        <!-- <div class="arrow"></div> -->
      </div>
      <div class="item">
        <div class="label">{{['微信绑定手机号','银行账号'][paywayIndex]}}</div>
        <div class="value">
          <input disabled type="text" v-model="account" placeholder="">
        </div>
      </div>
      <!-- <div class="item">
        <div class="label">{{['微信号','真实姓名'][paywayIndex]}}</div>
        <div class="value">
          <input type="text" v-model="realName" placeholder="请输入">
        </div>
      </div> -->
      <!-- <div class="item">
        <div class="label">提取金额</div>
        <div class="value">
          <input type="number" v-model="applyNum" @change="applyChange" placeholder="请输入提取金额">
        </div>
      </div> -->
    </div>
    <!-- <div class="tips">
      <p>温馨提示</p>
      <p>1.提现金额不足50元，收取1元手续费; 首次提现免手续费。</p>
      <p>2.确保您的返利实名与支付宝实名保持一直，方可提现成功。</p>
    </div> -->
    <div class="tips">
      <p>温馨提示</p>
      <!-- <p>请确保真实姓名和银行账号一致，否则将无法提现</p> -->
      <p>请确保银行账号信息无误，避免收益无法到账</p>
      <p>订单结算后10个工作日内收益自动到账</p>
    </div>
    <div class="sure" @click="pickPayWay">去绑定</div>
    <div class="sure" v-if="bankCardList.length && benefitOrderIds.length && userBenefitDetail.Balance!==0" @click="submitWithdraw">确认提款</div>
    <van-popup v-model="payWaysShow" position="bottom">
      <van-picker
        show-toolbar
        title="选择收款方式"
        :columns="payways"
        @cancel="hidePayWays"
        @confirm="pickedPayWay"
      />
    </van-popup>

    <div class="submit-success" v-if="submitSuccess">
      <p style="width: 100%">提现成功</p>
      <p style="width: 100%">最快将于一个工作日后到账</p>
      <em @click="finish">确认</em>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { Toast } from 'vant'
import { getMyBenefit, benefitWithdrawIds, getBankCard,getMyBenefitOrders } from '../../network/belong'

export default {
  components: {
    NavBar
  },
  mounted() {
    this.getMyBenefit()
    this.getMyBenefitOrders()
    this.getBankCard()
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      // applyNum: '',
      wxInfo: JSON.parse(localStorage.getItem('wxInfo')),
      payWaysShow: false,
      paywayIndex: 1,
      payways: ['微信支付','银行卡'],
      paywaysdata: ['WeChat','UnionCard'],
      paywaysImglist: ['wechat','bank-card'],
      realName: '',
      account: '',
      userBenefitDetail: {
        SettlementAmount: 0, // 累计收益 总结算收入
        Balance: 0, // 可提现
        WithdrawalsAmount: 0, // 已提现
        NoSettlementAmount: 0 // 待收益 未结算的佣金
      },
      bankCardList: [],
      benefitOrders: [],
      benefitOrderIds: [],
      isISP: localStorage.getItem('isISP'),
      submitSuccess: false,
    }
  },
  methods: {
    getMyBenefitOrders(){
      getMyBenefitOrders(res => {
        res = res.filter(item => {
          return !item.IsWithdraw && item.Status === 1
        })
        this.benefitOrders = res
        let benefitOrderIds = []
        res.map(item => {
          benefitOrderIds.push(item.OrderId.toString())
        })
        this.benefitOrderIds = benefitOrderIds
      })
    },
    getBankCard(){
      getBankCard(list => {
        this.bankCardList = list
        if(list.length){
          this.account = list[0].cardNo
        }
      })
    },
    getMyBenefit(){
      let requestData = {
        userkey: this.userKey
      }
      getMyBenefit(requestData, benefit => {
        this.userBenefitDetail = benefit
      })
    },
    pickPayWay(){
      // this.payWaysShow = true

      this.$router.push('/payment')
    },
    hidePayWays(){
      this.payWaysShow = false
    },
    pickedPayWay(value, index){
      this.paywayIndex = index
      this.payWaysShow = false
      this.account = ''
      this.realName = ''
      // this.applyNum = ''
    },
    submitWithdraw(){

      // if(!this.realName){
      //   Toast('请输入真实姓名')
      //   return false
      // }

      // if(this.applyNum > this.userBenefitDetail.WithdrawalsAmount){
      //   Toast('提取金额不能大于可用收益')
      //   return false
      // }
      let requestData = {
        userkey: this.userKey,
        orders: this.benefitOrderIds.join(','),
      }
      // console.log(requestData)
      // return false
      benefitWithdrawIds(requestData, () => {
        this.submitSuccess = true
        // Toast('提现成功，最快一个工作日后到账！')
        // setTimeout(() => {
        //   this.$router.back()
        // }, 2000);
      })
    },
    finish(){
      this.$router.back()
    },
    // applyChange(){
    //   if(this.applyNum > this.userBenefitDetail.WithdrawalsAmount){
    //     Toast('提取金额不能大于可用收益')
    //     return false
    //   }
    // }
  },
}
</script>

<style scoped>
.container{
  background-color: #fff;
}
.main{
  height: 90px;
  color: #ffffff;
  background-color: #000000;
}
.main .amount{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  padding: 0 30px;
  height: 90px;

}
.main .amount h3{
  font-size: 22px;
  padding-top: 10px;
}
.main .amount h3 i{
  font-size: 14px;
  padding-right: 5px;
}
.main .amount .send{
  width: 100px;
  line-height: 30px;
  border-radius: 30px;
  font-size: 12px;
  text-align: center;
  background-color: #646161;
}
.main .dis{
  padding: 15px 0 0 0;
  font-size: 14px;
}
.user-navs .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 50px;
  font-size: 14px;
  border-top: 1px solid #f7f7f7;
  background-color: #ffffff;
}
.user-navs .item-mt{
  margin-top: 10px;
  border-top: none;
}
.user-navs .item .value{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  color: #8c8c8c;
  text-align: right;
}
.user-navs .item .value .new{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #d50721;
}
.user-navs .item .value .alipay{
  width: 25px;
  margin-right: 10px;
}
.user-navs .item .arrow{
  width: 6px;
  height: 6px;
  border-top: 1px solid #8c8c8c;
  border-right: 1px solid #8c8c8c;
  transform: rotate(45deg);
  margin-left: 10px;
}
.user-navs .item input{
  width: 100%;
  text-align: right;
  height: 50px;
}
.tips{
  padding: 10px 20px 10px 30px;
  font-size: 12px;
  color: #999999;
  line-height: 1.6;
  background-color: #f7f7f7;
}
.sure{
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  border-radius: 50px;
  margin: 30px 30px 0 30px;
  background-color: #000000;
}
.payway-manage{
  text-align: center;
  line-height: 50px;
  border-top: 1px solid #f0f0f0;
  background-color: #f4f4f4;
}
.wximg{
  width: 28px; 
  border-radius: 50%;
  margin-right: 10px;
}
.submit-success{
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #000;
  text-align: center;
  font-size: 18px;
  background-color: #fff;
  z-index: 999;
}
.submit-success p{
  line-height: 2;
  font-size: 20px;
}
.submit-success em{
  padding: 15px 30px;
  border-radius: 6px;
  margin-top: 50px;
  color: #fff;
  background-color: #222;
}
</style>